<template>
	<div>
		<headNav title="亲情留言"></headNav>
		<classNav :title="studentInfo + ' 学生列表'"></classNav>
		<div class="container">
			<div v-for="(item, index) in sortedList" :key="index*1000">
				<div class="t-top">{{item.ying}}</div>
				<div v-for="item2 in item.list" :key="item2.id" class="oneStudent" @click="toChat(item2)">
					<img src="@/assets/img/default_head.png" alt="">
					<span>
						{{item2.name}}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
import pinyin from '@/assets/js/pinyin.js'
Vue.use(pinyin)

import headNav from '@/components/headNav/headNav'
import classNav from './classNav'
export default {
	name: 'list',
	components: {
		headNav, classNav
	},
	data() {
		return {
			studentList: [],
			sortedList: []
		}
	},
	computed: {
		studentInfo() {
			return this.$store.state.weChat.studentInfo
		}
	},
	activated() {
		this.getStudentList()
	},
	methods: {
		toChat(item) {
			this.$store.commit('weChat/setChatObj', item)
			this.$router.push('chatList')
		},
		getStudentList() {
			var params = {
				id: this.$store.state.user.classId
			}
			this.$store.dispatch('weChat/GetStudentList', params).then(
				res => {
					this.sortedList = []
					if (res.length > 0) {
						this.compareByABC(res, 'name')
						this.studentList = res
						this.sortedList = this.sortList()
					}
				}
			)
		},
		sortList() {
			var arr = []
			for (var item of this.studentList) {
				var mu = this.pinyin.getCamelChars(item.name).toLowerCase()
				var index = -1
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].ying.toLowerCase() == mu) {
						index = i
					}
				}
				if (index > -1) {
					arr[index].list.push(item)
				} else {
					arr.push({
						ying: mu.toUpperCase(),
						list: [item]
					})
				}
			}
			return arr
		}
	}
}
</script>
<style lang='less' scoped>
.container {
	// margin-top: 0.88rem;
}
.t-top {
	color: #010101;
	font-size: 0.24rem;
	background: #e6e6e6;
	padding: 0 0.24rem;
}
.oneStudent {
	position: relative;
	padding-left: 0.24rem;
	background: #fff;
	img {
		margin-top: 0.16rem;
		width: 0.72rem;
		height: 0.72rem;
		border-radius: 50%;
	}
	> span {
		width: 85%;
		height: 1rem;
		line-height: 1rem;
		display: inline-block;
		font-size: 0.28rem;
		vertical-align: top;
		margin-left: 0.24rem;
		color: #010101;
		border-bottom: 0.01rem solid #e6e6e6;
	}
}
.oneStudent:last-child {
	> span {
		border-width: 0;
	}
}
</style>